<template>
  <Row>
    <Carousel v-model="CarouselValue" style="position: relative;z-index: 100;position: relative;margin-top: -60px;"
              :autoplay="setting.autoplay"
              :autoplay-speed="setting.autoplaySpeed"
              :dots="setting.dots"
              :radius-dot="setting.radiusDot"
              :trigger="setting.trigger"
              :arrow="setting.arrow" @mouseenter.native="stopPlay" @mouseleave.native="startPlay">
      <CarouselItem>
        <router-link :to="{path: '/abouts'}">
          <img src="../../../../../static/img/v3_08_05.jpg" width="100%"/>
        </router-link>
        <div style="position: relative; margin-top: -100px; margin-left: 295px;text-align:left">
          <img src="../../../../../static/img/11_03.png" alt="" @click="videoShow">
        </div>
      </CarouselItem>
      <CarouselItem>
        <img src="../../../../../static/img/01_02_03.jpg" width="100%"/>
      </CarouselItem>
      <CarouselItem>
        <router-link :to="{path: '/product/mainorder'}">
          <img src="../../../../../static/img/01_02_04.jpg" width="100%"/>
        </router-link>
      </CarouselItem>
      <CarouselItem>
        <router-link :to="{path: '/product/station'}">
          <img src="../../../../../static/img/01_02_05.jpg" width="100%"/>
        </router-link>
      </CarouselItem>
      <CarouselItem>
        <router-link :to="{path: '/product/hardware'}">
          <img src="../../../../../static/img/01_02_06.jpg" width="100%"/>
        </router-link>
      </CarouselItem>
      <CarouselItem>
        <router-link :to="{path: '/product/finance'}">
          <img src="../../../../../static/img/img_banner06_2x.png" width="100%"/>
        </router-link>
      </CarouselItem>
    </Carousel>
    <Modal v-model="videoModalShow" width="1100px" id="videoModal">
      <keep-alive>
        <video width="1100px" height="520" controls="controls" class="" id="xlianVideo" v-if="videoModalShow">
          <source src="http://oss.x-link.cc/ico/xlink.mp4" type="video/mp4"/>
          网络无法连接！！
        </video>
      </keep-alive>
      <div slot="footer" style="height: 1px"></div>
    </Modal>
  </Row>
</template>
<script>
  export default {
    name: 'frontCarousel',
    data () {
      let setting = {
        autoplay: true,
        autoplaySpeed: 5000,
        dots: 'inside',
        radiusDot: true,
        trigger: 'hover',
        arrow: 'hover'
      }
      let CarouselValue = 0
      let videoModalShow = false
      let datas = { setting, CarouselValue, videoModalShow }
      return datas
    },
    methods: {
      startPlay () {
        this.setting.autoplay = true
      },
      stopPlay () {
        this.setting.autoplay = false
      },
      videoShow () {
        this.videoModalShow = true
      }
    },
    watch: {
      videoModalShow (val, oldval) {
        if (!val) {
          $('#xlianVideo').trigger('pause')
        }
      }
    }
  }
</script>
<style>
  #videoModal .ivu-modal-close {
    display: none;
  }

  #videoModal .ivu-modal-footer {
    display: none;
  }

  #videoModal .ivu-modal-body {
    padding: 0;
  }

  #videoModal video::-webkit-media-controls-enclosure {
    overflow: hidden;
  }

  #videoModal video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
  }
</style>
